<template>
  <!-- 添加文章对话框 -->
  <div class="container">
    <el-dialog
      :title="id ? '修改文章' : '新增文章'"
      :visible="dialogFormVisible"
      @close="closeDialog"
    >
      <el-form ref="form" label-width="120px" :model="form" :rules="rules">
        <el-form-item prop="title" label="文章标题">
          <el-input
            v-model="form.title"
            placeholder="请输入文章标签"
            style="width: 100%"
            size="mini"
          />
        </el-form-item>
        <!-- 富文本编辑器 -->
        <el-form-item label="文章内容" prop="articleBody">
          <quillEditor
            v-model="form.articleBody"
            @blue="$refs.form.validateField('content')"
          ></quillEditor>
        </el-form-item>
        <!-- 富文本编辑器 -->
        <el-form-item label="视频地址" prop="videoURL">
          <el-input
            v-model="form.videoURL"
            placeholder="请输入视频地址"
            size="mini"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item>
          <!-- 按钮 -->
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button size="medium" @click="closeDialog"> 取消 </el-button>
              <el-button size="medium" type="primary" @click="submit">
                确定
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { add, update, detail, list } from '@/api/hmmm/articles.js'

// 引入富文本组件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  // 局部注册
  components: {
    quillEditor
  },

  name: 'ArticlesAdd',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      form: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '文章标题的长度为2-10个字符',
            trigger: 'blur'
          },
          {
            validator: async (rule, value, callback) => {
              // 发起获取文章列表的请求
              const res = await list()
              console.log(res.data)

              // 判断是否有id，是否为编辑操作
              if (this.form.id) {
                // 如果是编辑操作 ，筛选掉自身在进行校验
                res.data.items = res.data.items.filter(item => item.id !== this.form.id)
              }

              // 遍历数据查找是否有重复的
              res.data.items.some(item => item.title === value)
                ? callback(new Error('文章标题中已经有该标题了'))
                : callback()
            },
            trigger: 'blur'
          }
        ], // 文章标题
        videoURL: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '文章内容的长度为1-10个字符',
            trigger: 'blur'
          },
          {
            validator: async (rule, value, callback) => {
              // 发起获取文章列表的请求
              const res = await list()
              console.log(res.data)

              // 判断是否有id，是否为编辑操作
              if (this.form.id) {
                // 如果是编辑操作 ，筛选掉自身在进行校验
                res.data.items = res.data.items.filter(item => item.id !== this.form.id)
              }

              // 遍历数据查找是否有重复的
              res.data.items.some(item => item.videoURL === value)
                ? callback(new Error('文章内容中已经有该内容了'))
                : callback()
            },
            trigger: 'blur'
          }
        ] // 文章内容
      }
    }
  },

  methods: {
    // 关闭弹窗
    closeDialog () {
      this.form = {
        title: '',
        articleBody: '',
        videoURL: '',
        id: ''
      }

      // 重置表单
      this.$refs.form.resetFields()

      this.$emit('update:dialogFormVisible', false)
    },
    // 点击确定按钮发起增加文章的请求
    async submit () {
      try {
        // form表单校验
        await this.$refs.form.validate()

        // 判断为添加还是编辑
        if (this.form.id) {
          console.log(this.form.id)
          await update(this.form)
          this.$message.success('编辑成功')
        } else {
          // 发起请求
          this.form.pid = this.pid
          await add(this.form)
          this.$message.success('添加成功')
        }

        // 关闭页面弹窗
        this.closeDialog()

        // $emit方式调用父组件上的方法

        // 调用父组件上的方法
        this.$parent.initTable()
      } catch (error) {
        console.log(error)
      }
    },
    // 在编辑状态下发起获取文章详情的请求
    async getDepartmentInfo () {
      const { data } = await detail(this.id)

      console.log(data)
      this.form = { ...data }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  .el-dialog {
    ::v-deep .el-dialog__header {
      padding: 20px 20px 10px;
    }
    .el-dialog__body {
      .el-form {
        .el-form-item--medium {
          margin-bottom: 18px;
          width: 100%;
          .el-input {
            width: 100%;
            line-height: 32px;
            font-size: 14px;
            ::v-deep .el-input__inner {
              width: 100%;
              height: 32px;
              line-height: 32px;
            }
          }
        }
        .el-form-item__content {
          .quill-editor {
            ::v-deep .ql-container {
              height: 200px;
            }
          }
          .el-row {
            width: 100%;
            display: flex;
            .el-col {
              width: 100%;
              display: flex;
              justify-content: flex-end;
            }
          }
        }
      }
    }
  }
}
</style>
